<template>
    <new-search-panel :showAdvanced="false" @search="onSearch" @reset="onReset">
        <template #default>
            <a-col :md="24" :sm="24">
                <a-form-item label="职位名称">
                    <a-input :maxLength="35" v-model:value="queryParam.name" allow-clear placeholder="请输入职位名称" />
                </a-form-item>
            </a-col>
            <a-col :md="24" :sm="24">
                <a-form-item label="唯一编码">
                    <a-input :maxLength="35" v-model:value="queryParam.code" allow-clear placeholder="请输入唯一编码" />
                </a-form-item>
            </a-col>
        </template>
        <template #button>
            <a-button type="primary" @click="addForm()">
                <template #icon><PlusOutlined /></template>
                新增职位</a-button
            >
        </template>
    </new-search-panel>
    <!-- list table -->
    <dynamic-table
        :scrollX="1000"
        :fixed="true"
        :tableType="1"
        ref="tableRef"
        :columns="columns"
        :get-list-func="sysPosPage"
        :queryParam="queryParam"
        :rowKey="(record) => record.id"
    >
        <template #sex="{ text }" v-if="sexlist.length > 0">
            {{ filterEnum(sexlist, text) }}
        </template>
        <template #action="{ record }">
            <a @click="editForm(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm placement="topRight" title="确认删除？" @confirm="() => del(record)">
                <a>删除</a>
            </a-popconfirm>
        </template>
    </dynamic-table>
    <posFrom ref="formRef" @refresh="refresh" :title="title" />
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, createVNode, onMounted, ref, computed } from 'vue'
import { message, Modal } from 'ant-design-vue'
import { sysPosPage, sysPosDelete, sysPosAdd } from '@/api/system/pos'
import { columns } from './columns'
import { useFormModal } from '@/hooks/useFormModal'
import { getFormSchema } from './form-schema'
import { filterEnum } from '@/utils/common'
import { useStore } from '@/store'
import { newSearchPanel, DynamicTable } from '@/components'
import posFrom from './components/posFrom.vue'
export default defineComponent({
    name: 'SystemRole',
    components: {
        DynamicTable,
        newSearchPanel,
        posFrom
    },
    setup() {
        const tableRef = ref<any>(null)
        const store = useStore()
        const formRef = ref<any>(null)
        const state = reactive({
            title: '',
            treeData: [],
            sexlist: [],
            statusDictTypeDropDown: [],
            queryParam: {
                searchValue: '',
                searchStatus: null
            },
            tableLoading: false,
            rowSelection: {
                onChange: (selectedRowKeys, selectedRows) => {
                    state.rowSelection.selectedRowKeys = selectedRowKeys
                },
                selectedRowKeys: []
            }
        })
        onMounted(() => {
            store.dispatch('enums/getEnum', 'sex').then((res) => {
                state.sexlist = res
            })
            store.dispatch('enums/getEnum', 'common_status').then((res) => {
                state.statusDictTypeDropDown = res
            })
        })
        /**
         * 删除
         * @param record
         */
        function del(record) {
            console.log(record)
            sysPosDelete(record).then((res) => {
                message.success('删除成功')
                refresh()
            })
        }
        /**
         * 编辑
         */
        function editForm(e) {
            state.title = '编辑职位'
            formRef.value.add = false
            formRef.value.visible = true
            formRef.value.detailData = e
        }
        /**
         * 查询
         */
        function onSearch() {
            tableRef.value.queryParam = state.queryParam
            tableRef.value.resetPagination()
            tableRef.value.refreshTableData()
        }
        /**
         * 查询当前页
         */
        const refresh = () => {
            tableRef.value.refreshTableData()
        }
        /**
         * 重置
         */
        function onReset() {
            state.queryParam = {
                searchValue: '',
                searchStatus: null
            }
            onSearch()
        }
        /**
         * 新增用户
         */
        function addForm() {
            state.title = '新增职位'
            formRef.value.visible = true
            formRef.value.add = true
        }
        return {
            ...toRefs(state),
            columns,
            tableRef,
            sysPosPage,
            onReset,
            onSearch,
            refresh,
            addForm,
            filterEnum,
            del,
            formRef,
            sysPosDelete,
            editForm
        }
    }
})
</script>
